<template>
  <div class="information">
    <a-row>
      <a-col :span="16">
        <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-row style="margin-bottom: 26px">
            <tit>公司信息</tit>
            <a-col :span="12" v-for="item in label3" :key="item.val">
              <a-form-item :label="item.name" v-if="['公司类型:', '公司规模:', '预计签约时间:', '预计派单时间:'].includes(item.name)">
                {{ form[item.val] || "暂无" }}
              </a-form-item>
              <a-form-item :label="item.name" v-else>
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>{{ form[item.val] || "暂无" }}</span>
                  </template>
                  <div class="overflows">
                    {{ form[item.val] || "暂无" }}
                  </div>
                </a-tooltip>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-bottom: 26px">
            <tit>联系人信息</tit>
            <a-col :span="12" v-for="item in label1" :key="item.val">
              <a-form-item :label="item.name" style="height: 100%">
                {{ form[item.val] || "暂无" }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <tit>法人信息</tit>
            <a-col :span="12" v-for="item in label2" :key="item.val">
              <a-form-item :label="item.name">
                {{ form[item.val] || "暂无" }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-for="item in label4" :key="item.val">
            <a-col :span="24">
              <a-form-item :label="item.name" :label-col="{ span: 3 }" :wrapper-col="{ span: 18 }">
                {{ form[item.val] || "暂无" }}
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="item.name === '上传合同:' || item.name === '营业执照:' ? 24 : 12" v-for="item in label5" :key="item.val">
              <a-form-item :label="item.name" v-if="item.name === '上传合同:'" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                <div v-if="form[item.val]" style="display: flex; flex-wrap: wrap">
                  <div v-for="htItem in form[item.val].split(',')" class="ht mr8 mb8" :key="htItem">
                    <div>
                      <img :src="jl" style="width: 32px; height: 37px" />
                    </div>
                    <div>
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>{{ getName(htItem) }}</span>
                        </template>
                        <div class="htname">
                          {{ getName(htItem) }}
                        </div>
                      </a-tooltip>
                      <div class="hta">
                        <a :href="`${htItem}?token=${token}`" download target="_blank">预览下载</a>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>暂无</div>
              </a-form-item>
              <a-form-item :label="item.name" v-else-if="item.name === '营业执照:'" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                <div v-if="form[item.val]" style="display: flex; flex-wrap: wrap">
                  <div v-for="htItem in form[item.val].split(',')" class="ht mr8 mb8" :key="htItem">
                    <div>
                      <img :src="jl" style="width: 32px; height: 37px" />
                    </div>
                    <div>
                      <a-tooltip placement="top">
                        <template slot="title">
                          <span>{{ getName(htItem) }}</span>
                        </template>
                        <div class="htname">
                          {{ getName(htItem) }}
                        </div>
                      </a-tooltip>
                      <div class="hta">
                        <a :href="`${htItem}?token=${token}`" download target="_blank">预览下载</a>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>暂无</div>
              </a-form-item>
              <a-form-item :label="item.name" v-else>
                {{ form[item.val] || "暂无" }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-col>
    </a-row>
  </div>
  <!--  -->
</template>

<script>
import moment from "moment";
import tit from "../../component/tit";
import { getQueryCustomerInfo } from "../api";
const label1 = [
  { name: "联系人姓名:", val: "name" },
  { name: "性别:", val: "gender" },
  { name: "手机:", val: "phone" },
  { name: "邮箱:", val: "email" },
  { name: "微信:", val: "wechat" },
  { name: "职位:", val: "postName" }
];
const label2 = [
  { name: "法人姓名:", val: "legalPersonName" },
  { name: "性别:", val: "legalPersonGender" },
  { name: "手机:", val: "legalPersonPhone" },
  { name: "邮箱:", val: "legalPersonEmail" },
  { name: "微信:", val: "legalPersonWechat" },
  { name: "职位:", val: "legalPersonPostName" }
];
const label3 = [
  { name: "公司名称:", val: "companyName" },
  { name: "公司类型:", val: "companyType" },
  { name: "公司所在城市:", val: "socCityName" },
  { name: "公司地址:", val: "companyAddress" },
  { name: "公司行业:", val: "companyIndustry" },
  { name: "公司规模:", val: "companyPersonSize" },
  { name: "项目名称:", val: "entryName" },
  { name: "产品名称:", val: "productName" },
  { name: "预计签约时间:", val: "estimatedSigningTime" },
  { name: "预计派单时间:", val: "estimatedDistributeTime" }
];
const label4 = [
  { name: "客户介绍:", val: "customerIntroduce" },
  { name: "备注:", val: "mark" }
];
const label5 = [
  { name: "上传合同:", val: "contract" },
  { name: "合同有效期:", val: "contractTime" },
  { name: "营业执照:", val: "businessLicense" },
  { name: "合作产品:", val: "cooperativeProducts" }
];
export default {
  components: {
    tit
  },
  data() {
    return {
      jl: require("@/assets/recruitment/jl.png"),
      form: {},
      label1,
      label2,
      label3,
      label4,
      label5
    };
  },
  computed: {
    token() {
      return this.$store.state.auth.token;
    }
  },
  created() {
    this.onGetQueryCustomerInfo();
  },
  methods: {
    getName(url) {
      const arr = url.split("/");
      return arr[arr.length - 1];
    },
    moment,
    async onGetQueryCustomerInfo() {
      try {
        const { data } = await getQueryCustomerInfo({
          customerId: this.$route.query.id,
          isPublic: this.$route.path === "/clientele/sea/msg"
        });

        this.form = data;
        const companyAddress = this.form.companyAddress ? this.form.companyAddress.split(",") : [];
        if (companyAddress.length >= 2) {
          const a = companyAddress[1].split("/")[0] || "";
          const b = companyAddress[1].split("/")[1] || "";
          const c = companyAddress[1].split("/")[2] || "";
          this.form.socCityName = a + b + c;
          this.form.companyAddress = companyAddress[2];
          this.$emit("upDateAddress", companyAddress[2]);
        } else {
          this.form.companyAddress = companyAddress[0];
          this.$emit("upDateAddress", companyAddress[0]);
        }
        const genderArr = ["男", "女", "未知"];
        this.form.gender = genderArr[this.form.gender - 1];
        this.form.legalPersonGender = genderArr[this.form.legalPersonGender - 1];
        const companyTypeSelectArr = ["有限责任", "个人独资", "股权有限责任", "其他"];
        this.form.companyType = companyTypeSelectArr[this.form.companyType - 1];
        const companyPersonSizeSelectArr = ["500以下", "500-1000", "1000-3000", "3000以上"];
        this.form.companyPersonSize = companyPersonSizeSelectArr[this.form.companyPersonSize - 1];
        const customerDemandSelectArr = ["商业险", "单工伤", "深圳五险", "发薪报税", "代理委托", "劳务派遣", "劳务外包", "灵活用工"];
        const customerDemand = this.form.customerDemand ? this.form.customerDemand.split(",") : [];
        customerDemand.map((m) => {
          this.form.customerDemand = customerDemandSelectArr[m - 1];
        });
        if (this.form.isSign) {
          this.form.estimatedSigningTime = this.form.signingTime ? moment(this.form.signingTime).format("YYYY-MM-DD") : null;
        } else {
          this.form.estimatedSigningTime = this.form.estimatedSigningTime
            ? moment(this.form.estimatedSigningTime).format("YYYY-MM-DD")
            : null;
        }

        this.form.estimatedDistributeTime = this.form.estimatedDistributeTime
          ? moment(this.form.estimatedDistributeTime).format("YYYY-MM-DD")
          : null;
        const contractStartTime = this.form.contractStartTime ? moment(this.form.contractStartTime).format("YYYY-MM-DD") : null;
        const contractEndTime = this.form.contractEndTime ? moment(this.form.contractEndTime).format("YYYY-MM-DD") : null;
        if (contractStartTime && contractEndTime) this.form.contractTime = contractStartTime + " 至 " + contractEndTime;
        this.$emit("upDate", this.form.isSign);
      } catch (err) {
        console.log("error log --> ", err);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.information {
  ::v-deep .ant-form-item {
    margin-bottom: 0;
  }
  ::v-deep .ant-form-item-label label {
    font-size: 14px;
    font-weight: 400;
    color: #767885;
  }
  .ht {
    width: 176px;
    display: flex;
    .htname {
      width: 120px;
      height: 22px;
      line-height: 22px;
      margin-left: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hta {
      height: 14px;
      margin-left: 8px;
      margin-top: -8px;
    }
  }
  .ant-row {
    margin-left: 16px;
  }

  ::v-deep .ant-form-item-label {
    margin-left: -24px !important;
  }
  .overflows {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
